<template>
  <h1>员工列表练习</h1>
  <input placeholder="请收入员工姓名" v-model="uname">
  <input placeholder="请收入员工工资" v-model="salary">
  <input placeholder="请收入员工岗位" v-model="post">
  <hr>
  <button @click="add()">点我添加</button>
  <hr>
  <table border="1px">
    <tr>
      <th>编号</th>
      <th>员工姓名</th>
      <th>员工工资</th>
      <th>员工岗位</th>
    </tr>
    <tr v-for="(p,index) in constumerArr">
      <td>{{ index+1 }}</td>
      <td>{{ p.uname }}</td>
      <td>{{ p.salary }}</td>
      <td>{{ p.post }}</td>
    </tr>
  </table>

</template>

<script setup>
import {ref} from "vue";

const uname = ref('');
const salary = ref('');
const post = ref('');
const constumerArr = ref([]) ;

const add = () => {
  const constumer = {
    uname: uname.value,
    salary: salary.value,
    post: post.value
  }
  console.log(constumer);
  // 落下了一个value
  constumerArr.value.push(constumer);

  uname.value = '';
  salary.value = '';
  post.value = '';
}

</script>

<style scoped>

</style>